<template>
	<view style="height: 100%;overflow: auto;" :style="{
		'--app-color-1': app_color,
		'--app-color-2': app_color_2,
	}">
		<!-- 顶部轮播 -->
		<u-swiper :list="data.content.img_list" radius="0" :autoplay="false" height="560rpx" @click="imgInfo"
			indicatorStyle="right: 16rpx;bottom: 68rpx" imgMode="aspectFill" @change="e => currentNum = e.current"
			circular>
			<view slot="indicator" class="indicator-num">
				<text class="indicator-num__text">{{ currentNum + 1 }}/{{ data.content.img_list ?
					data.content.img_list.length : 0 }}</text>
			</view>
		</u-swiper>

		<!-- 价格销售显示区 -->
		<view class="priceInfo">
			<view class="price">
				<view>￥<text class="number">{{ data.content.shop_price }}</text></view>
				<view v-if="data.content.market_price > data.content.shop_price"
					style="text-decoration: line-through;">￥{{
						data.content.market_price }}</view>
			</view>
			<view class="xiaoliang">销量：{{ Number(data.content.snum) + Number(data.content.origin_snum) }}</view>
		</view>

		<view style="padding: 0 16rpx;" v-if="data.content.id">
			<view class="content-box">
				<text class="title-info">
					<text class="hot" v-if="data.content.is_recommend == 1">热门</text>
					<text class="u-line-2" :style="{ 'text-indent': data.content.is_recommend == 1 ? '90rpx' : '' }">{{
						data.content.title }}</text>
				</text>
				<text v-if="data.content.desc.length" style="font-size: 20rpx;color: #999; margin-top: 16rpx;">{{
					data.content.desc }}</text>
				<!-- <view class="t-price-box"> -->
				<!-- <view class="price-box"> -->
				<!-- <text class="shop_price" :style="'color: ' + app_color">￥{{ data.content.shop_price }}</text> -->
				<!-- <template
							v-if="Number(data.content.market_price) > 0 && Number(data.content.market_price) > Number(data.content.shop_price)"> -->
				<!-- <text class="old_price">￥{{ data.content.market_price }}</text> -->
				<!-- 		<view class="zhekou" :style="'background: linear-gradient(to right,'+app_color_t+','+app_color+');'">
								{{String(data.content.shop_price/data.content.market_price*10).substr(0,4)}}折
								
								会员价：456起
								</view> -->
				<!-- </template> -->
				<!-- #ifdef MP -->
				<!-- <view class="share_btn"
							:style="'background: linear-gradient(to right,' + app_color_t + ',' + app_color + ');'">
							<view class="share_icon">
								<u-icon color="#fff" name="share"></u-icon>
							</view>
							<text>分享</text>
							<button open-type="share" style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;
									opacity: 0;"></button>
						</view> -->
				<!-- #endif -->
				<!-- </view> -->
				<!-- </view> -->
				<!-- <view class="goods_text">
					<text>销量：{{ Number(data.content.snum) + Number(data.content.origin_snum) }}</text>
					<text>库存：{{ data.content.stock }}</text>
					<text>好评率：{{ data.content.haoping }}%</text>
				</view> -->

				<view class="xianshi" v-if="plugin.xianshi && data.content.sale_time.length">
					<u-badge type="error" max="99" value="限时销售"></u-badge>
					<template v-if="data.content.xianshi && data.content.xianshi > 0">
						<text style="font-size: 12px;margin-left:15px">剩余：</text>
						<u-count-down :time="data.content.xianshi * 1000" @change="onChangeTime">
							<text class="sale_time_num">
								<text v-if="timeData.days > 0">{{ timeData.days }}&nbsp;天</text>
								<text v-if="timeData.hours > 0">{{
									timeData.hours > 10 ? timeData.hours : '0' + timeData.hours }}&nbsp;时</text>
								<text v-if="timeData.minutes > 0">{{ timeData.minutes }}&nbsp;分</text>
								<text>{{ timeData.seconds }}&nbsp;秒</text>
							</text>
						</u-count-down>
						<text style="font-size: 12px;margin-left: 5px;"> {{ data.content.xianshi_title }}</text>
					</template>
					<text class="sale_time" v-if="data.content.sale_time_num[1] < now">当前销售已结束！</text>
				</view>
			</view>

			<!-- 优惠券区 -->
			<view v-if="plugin.coupon && data.coupon">
				<view class="youhui-box"
					v-if="data.coupon || data.manjian || data.xinren || (data.content.free_freight == 1 && data.baoyou && data.baoyou.id)">
					<view class="youhuiquan conten-cell">
						<text class="discount_icon"
							style="font-size: 24rpx; color: #fff; background-color: #F1454D; padding: 8rpx; border-radius: 12rpx;">券</text>
						<text class="cell-text">优惠券</text>
						<view class="cell-right">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<!-- 评论区 -->
			<view class="content-box" @click="pingjia()" style="
				display: flex;flex-direction: row;justify-content: space-between;height: 42px;align-items: center;">
				<text style="font-weight: 600;color: #5a5a5a;font-size: 15px;">评价({{ data.content.comment_count
				}})</text>
				<view style="display: flex;flex-direction: row;justify-content: flex-start;align-items: center;">
					<text style="font-size: 13px;color: #666;margin-right: 5px;">好评率 {{ data.content.haoping }}%</text>
					<u-icon name="arrow-right" size="14"></u-icon>
				</view>
			</view>

			<!-- 内容管理 -->
			<view class="content-box">
				<u-divider text="图文详情" :hairline="true"></u-divider>
				<u-parse :content="data.content.content"></u-parse>
			</view>
		</view>

		<!-- 包邮说明 -->
		<u-popup v-if="data.baoyou && data.baoyou.rule && data.baoyou.rule.length > 0" :show="baoyouPopup" mode="center"
			round="10" @close="PopupClose()" :closeable="true" :closeOnClickOverlay="true">
			<view style="padding: 12px;width: 600rpx;overflow: auto;height: 650rpx;">
				<text style="font-size: 14px;color: #666">包邮说明：</text>
				<view v-for="list in data.baoyou.rule">
					<u-divider text="分割线" :dot="true"></u-divider>
					<text style="font-size: 14px;color: #ff0000;" v-if="data.baoyou.type == 1">以下地区-订单满{{ list.num
					}}元包邮：</text>
					<text style="font-size: 14px;color: #ff0000;" v-else-if="data.baoyou.type == 2">以下地区-单件商品满{{
						list.num
					}}元包邮：</text>
					<text style="font-size: 14px;color: #ff0000;" v-else-if="data.baoyou.type == 3">以下地区-订单商品总数量满{{
						list.num
					}}件包邮：</text>
					<text style="font-size: 14px;color: #ff0000;" v-else-if="data.baoyou.type == 4">以下地区-单个商品满{{
						list.num
					}}件包邮：</text>
					<view
						style="display: flex;;flex-direction: row;justify-content: flex-start;align-items: center;flex-wrap: wrap;">
						<view v-for="l in list.city" style="font-size: 13px;color: #666;padding: 2px;flex: 1 0 auto;">
							{{ l }}
						</view>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 限购说明 -->
		<u-popup v-if="data.content.limit" :show="xiangouPopup" mode="center" round="10" @close="PopupClose()"
			:closeable="true" :closeOnClickOverlay="true">
			<view
				style="padding: 12px;width: 600rpx;overflow: auto;height: 650rpx;display: flex;flex-direction: column;">
				<text style="font-size: 14px;color: #666">限购说明：</text>
				<view style="display: flex;flex-direction: column;">
					<u-divider text="分割线" :dot="true"></u-divider>
					<text style="font-size: 14px;color: #666;" v-if="data.content.limit.day > 0">每天限购{{
						data.content.limit.day
					}}单</text>
					<text style="font-size: 14px;color: #666;" v-if="data.content.limit.week > 0">每周限购{{
						data.content.limit.week
					}}单</text>
					<text style="font-size: 14px;color: #666;" v-if="data.content.limit.month > 0">每月限购{{
						data.content.limit.month }}单</text>
					<text style="font-size: 14px;color: #666;" v-if="data.content.limit.year > 0">每年限购{{
						data.content.limit.year
					}}单</text>
					<text style="font-size: 14px;color: #666;" v-if="data.content.limit.forever > 0">最大购买数量：{{
						data.content.limit.forever }}单</text>
				</view>
				<text style="font-size: 14px;color: #666;font-weight: 600;">限购城市：</text>
				<view style="display: flex;flex-direction: column;">
					<text style="color: #666;font-size: 14px" v-for="c in data.content.territorial_citys">{{ c }}</text>
				</view>
			</view>
		</u-popup>

		<!-- 底部提交订单区域 -->
		<view style="box-sizing: border-box;">
			<view style="height: 144rpx;"></view>
			<view class="buy-box">
				<view class="buy-info">
					<view class="buy-btn" @click="navto('pages/plugin/kefu/call')">
						<u-icon name="server-man" color="#bababa" size="52rpx"></u-icon>
						<text>客服</text>
					</view>
					<view class="buy-btn" @click="collect">
						<u-icon name="heart-fill" :color="data.collect == 1 ? app_color : '#bababa'"
							size="52rpx"></u-icon>
						<text :style="data.collect ? 'color: ' + app_color : ''">收藏</text>
					</view>
					<view class="buy-btn" @click="navto('page_mall/goods/shopcart')">
						<image src="https://moxifile.oss-cn-beijing.aliyuncs.com/images/mp/tabbar/tab_1_tab.png"
							mode="aspectFill"></image>
						<text>购物车</text>
					</view>

					<view class="buy-btn-group" @click="openBuy()">
						<view class="car" style="background-color: var(--app-color-2);">
							<text>加入购物车</text>
						</view>
						<view class="buy" style="background-color: var(--app-color-1);">
							<text>立即购买</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 评论区 -->
		<u-popup :show="pj" @close="pj = false" round="10" closeable :overlayStyle="{ zIndex: '2' }" :zIndex="3"
			:customStyle="{ maxHeight: '80vh' }" closeOnClickOverlay>
			<view style="overflow-y: auto;display: flex;flex-direction: column;height: 56vh;">
				<view style="display: flex;flex-direction: column;box-shadow: 0 0 5px #ccc;border-radius: 10px 10px 0 0 ;
					padding: 10px;position: sticky;top: 0;background-color: #fff; z-index: 999;">
					<view style="display: flex;flex-direction: row;justify-content: space-between;">
						<text style="font-size: 16px;color: #333">用户评价</text>
						<u-icon name="close" size="16" @click="pj = false"></u-icon>
					</view>
					<view style="display: flex;flex-direction: row;margin: 10px 0;">
						<text style="font-size: 14px;color: #666">综合评分：</text>
						<u-rate :count="5" readonly :activeColor="app_color" allowHalf
							:value="pingjiaInfo.rate"></u-rate>
					</view>

					<u-subsection @change="sectionChange" :activeColor="app_color" :list="list"
						:current="pingjiaInfo.type - 1"></u-subsection>
				</view>

				<view style="padding: 10px;display: flex;flex-direction: column;">
					<scroll-view :scrollTop="scrollTop" @scrolltolower="scrolltolower()"
						style="display: flex;flex-direction: column;flex-grow: 1;" @scroll="scroll">
						<view class="pingjia-li" v-for="(list, index) in evaluate"
							style="display: flex;flex-direction: column;margin: 10px 0;" :key="index">
							<view style="display: flex;flex-direction: row;justify-content: space-between;">
								<view style="display: flex;flex-direction: row;">
									<u--image :showLoading="true" :src="list.pic" width="60rpx" height="60rpx"
										radius="100"></u--image>
									<text style="line-height: 60rpx;font-size: 14px;color: #666;margin-left: 20rpx;;">{{
										list.username }}</text>
								</view>
								<text style="font-size: 13px;color: #666;line-height: 60rpx;">发布于：{{
									$u.timeFrom(list.c_time)
								}}</text>
							</view>
							<view style="width: 670rpx;margin-left: 80rpx;font-size: 14px;color: #444;">
								{{ list.content.length ? list.content : '该用户很懒，没有填写评价内容！' }}
							</view>
							<view v-if="list.img_list.length"
								style="width: 670rpx;margin-left: 80rpx;font-size: 14px;color: #555;margin-top: 5px;">
								<u-album :urls="list.img_list" rowCount="3" space="10rpx"
									multipleSize="200rpx"></u-album>
							</view>
							<view style="width: 670rpx;margin-left: 80rpx;font-size: 14px;color: #555;margin-top: 5px;display: flex;
								flex-direction: row;">
								<text>用户评分：</text>
								<u-rate :count="5" readonly :activeColor="app_color" allowHalf
									:value="list.rate"></u-rate>
							</view>
						</view>
						<view style="width: 100%;" v-if="!pingjiaInfo.hasMore">
							<u-empty text="没有更多评价..." iconSize="0">
							</u-empty>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>

		<!-- 选择规格添加购物车/购买 -->
		<goods-buy ref="goods_buy" :content="data"></goods-buy>
	</view>
</template>

<script>
export default {
	name: "goods-info",
	data() {
		return {
			list: ['好评', '中评', '差评'],
			evaluate: [],
			pingjiaInfo: {
				rate: 5,
				type: 1,
				page: 1,
				page_num: 6,
				hasMore: true,
			},
			curNow: 0,
			pj: false,//显示评价窗口
			goods_buy: false,
			xiangouPopup: false,//限购弹出框
			baoyouPopup: false,//包邮详情
			timeData: {},
			now: 0,
			coupon: {},
			manjian: {},
			data: {
				content: {},
				baoyou: {}
			},
			app_color: "",
			app_color_2: "",
			app_color_t: "",//0.6透明度
			app_color_2_t: "",//0.6透明度
			plugin: {},
			btnCss: "",

			currentNum: 0, //轮播索引
			scrollTop: 0,
			old: {
				scrollTop: 0
			}
		};
	}, props: {
		set: {
			type: Object,
			default() {
				return {

				}
			}
		},
		goods_id: {
			type: String | Number,
			default: ""
		}
	},
	created() {
		const color = uni.$u.colorGradient(this.$appData.data.app_color_2, this.$appData.data.app_color, 2)
		this.btnCss = this.moxi.background(color)

		this.plugin = this.$appData.plugin;
		this.now = Number(new Date().getTime() / 1000);
		this.app_color = this.$appData.data.app_color;
		// app_color_2 获取红色
		this.app_color_2 = this.$appData.data.app_color_2;
		this.app_color_t = uni.$u.colorToRgba(this.app_color, 0.5);
		this.app_color_2_t = uni.$u.colorToRgba(this.app_color_2, 0.5);
		this.getInfo()
	},
	methods: {
		scroll(e) {
			this.old.scrollTop = e.detail.scrollTop
		},
		goTop(e) {
			// 解决view层不同步的问题
			this.scrollTop = this.old.scrollTop
			this.$nextTick(function () {
				this.scrollTop = 0
			});
		},
		scrolltolower(e) {
			if (this.pingjiaInfo.hasMore) {
				this.pingjiaInfo.page++;
				this.get_evaluate();
			}
		},
		sectionChange(e) {
			this.pingjiaInfo.type = e + 1;
			this.pingjiaInfo.hasMore = true;
			this.evaluate = [];
			this.get_evaluate(1);
			this.goTop();
		},
		pingjia() {
			this.pj = true;
			if (!this.evaluate.length) {
				this.get_evaluate()
			}
		},
		get_evaluate(page) {
			if (!this.pingjiaInfo.hasMore) {
				return false;
			}
			this.pingjiaInfo.id = this.data.content.id;
			if (page) {
				this.pingjiaInfo.page = page;
			}
			let self = this;
			this.moxiPost('/plugin/mall/index/goods/get_evaluate', this.pingjiaInfo, function (data) {
				if (data.data.allpage <= self.pingjiaInfo.page) {
					self.pingjiaInfo.hasMore = false;
				}
				self.pingjiaInfo.rate = data.data.rate / data.data.all;
				self.list[0] = '好评(' + data.data.type.type_1 + ')';
				self.list[1] = '中评(' + data.data.type.type_2 + ')';
				self.list[2] = '差评(' + data.data.type.type_3 + ')';
				for (let k in data.data.data) {
					self.evaluate.push(data.data.data[k]);
				}
			})
		},
		collect() {
			let self = this;

			this.moxiPost('/plugin/mall/user/collect/collect', { goods_id: this.data.content.id }, function (data) {
				self.msg(data.hint);
				if (self.data.collect == 1) {
					self.data.collect = 0;
				} else {
					self.data.collect = 1;
				}
			})
		},
		openBuy() {
			this.$refs.goods_buy.open(this.data)
		},
		PopupClose() {
			this.baoyouPopup = false;
			this.xiangouPopup = false;
		},
		onChangeTime(e) {
			this.timeData = e;
		},
		xianshiInit() {
			if (this.data.content.sale_time_num) {
				if (this.data.content.sale_time_num[0] < this.now && this.data.content.sale_time_num[1] > this.now) {//销售中
					this.data.content.xianshi = this.data.content.sale_time_num[1] - this.now;
					this.data.content.xianshi_title = '结束'
				} else if (this.data.content.sale_time_num[0] > this.now) {//未开始
					this.data.content.xianshi = this.data.content.sale_time_num[0] - this.now;
					this.data.content.xianshi_title = '开始'
				} else {//销售结束
					this.data.content.xianshi_title = '销售结束'
				}
			}
		},

		getInfo() {
			let self = this;

			this.moxiPost('/plugin/mall/index/goods/goods_info', { id: this.goods_id }, function (data) {
				self.data = data.data;
				uni.$u.mpShare.title = data.data.content.title;
				uni.$u.mpShare.imageUrl = data.data.content.img;
				if (self.data.content.vedio.length) {
					if (self.data.content.vedio_img.length) {
						self.data.content.img_list.unshift({
							poster: self.data.content.vedio_img,
							url: self.data.content.vedio,
							type: 'video'
						})
					} else {
						self.data.content.img_list[0] = {
							poster: self.data.content.img,
							url: self.data.content.vedio,
							type: 'video'
						}
					}
				}
				self.data.content.content = self.data.content.content.replace(/\<img /g, '<img style="max-width:100%;display:block;" ');
				// setTimeout(function(){
				// 	uni.setNavigationBarTitle({
				// 		title: self.data.content.title
				// 	});
				// },800)
				self.xianshiInit()
			})
		},
		imgInfo(e) {
			let img_list = uni.$u.deepClone(this.data.content.img_list);
			if (img_list[0].url) {
				if (e == 0) {
					return false;
				}
				img_list.splice(0, 1);
				e--;
			}
			uni.previewImage({
				urls: img_list,
				current: e,
			});

		}
	}

}
</script>

<style lang="scss" scoped>
.indicator-num {
	background-color: #999;
	border-radius: 100px;
	padding: 0 16rpx;

	&__text {
		color: #ffffff;
		font-size: 28rpx;
		height: 44rpx;
		line-height: 44rpx;
	}
}

.priceInfo {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 22rpx 48rpx;
	background-color: var(--app-color-2);
	border-radius: 12rpx;
	color: #fff;
	margin: -52rpx 16rpx 24rpx;

	.price {
		font-size: 20rpx;
		display: flex;
		gap: 4px;
		align-items: baseline;

		.number {
			font-size: 48rpx;
			font-weight: bold;
		}
	}

	.xiaoliang {
		font-size: 24rpx;
	}
}

.content-box {
	padding: 28rpx;
	background-color: #fff;
	border-radius: 12rpx;
	margin-bottom: 24rpx;

	.title-info {
		font-size: 32rpx;
		color: #000;
		position: relative;

		.hot {
			width: 56rpx;
			text-align: center;
			position: absolute;
			left: 0;
			top: 4rpx;

			white-space: nowrap;
			font-size: 20rpx;
			color: #fff;
			background-color: var(--app-color-2);
			border-radius: 12rpx;
			padding: 4rpx 8rpx;
		}
	}
}

.youhui-box {
	padding: 20rpx 32rpx;
	background-color: #fff;
	border-radius: 12rpx;
	margin-bottom: 24rpx;

	.youhuiquan {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.cell-text {
		margin: 0 auto 0 16rpx;
	}

	.conten-cell {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		margin: 20rpx 0;
	}
}

.t-price-box {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin: 10px 0 5px 0;
}

.price-box {
	display: flex;
	flex-direction: row;
	position: relative;
	width: 100%;
}

.old_price {
	font-size: 12px;
	color: #ccc;
	text-decoration: line-through;
	margin: 8px;
	font-style: oblique;
}

.zhekou {
	padding: 1px 2px;
	border-radius: 5px;
	color: #fff;
	font-size: 12px;
	height: 16px;
	margin-top: 5px;
	;
}

.shop_price {
	color: red;
	font-size: 21px;
	font-weight: 600;
}

.share_btn {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	padding: 3px 9px;
	color: #fff;
	position: absolute;
	right: -5px;
	top: 2px;
	height: 20px;
	border-bottom-left-radius: 15px;
	border-top-left-radius: 15px;
}

.share_btn .share_icon {
	margin-top: 2px;
	margin-right: 3px
}

.share_btn text {
	font-size: 14px;
}

.goods_text {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.goods_text text {
	font-size: 12px;
	color: #adadad
}

.xianshi {
	display: flex;
	flex-direction: row;
	margin: 5px 0;
	background: linear-gradient(to right, rgba(255, 69, 68, 0.2), rgba(255, 69, 68, 0.2));
	padding: 10px;
	border-radius: 10px;
}

.sale_time {
	font-size: 12px;
	color: #333;
	margin-left: 5px;
	;
}

.sale_time_num {
	font-size: 12px;
	display: inline-block;
	color: #333;
}

.manjian-text {
	font-size: 12px;
	color: #fe624b;
	padding: 1px 3px;
	border: 1px #fe624b solid;
	border-radius: 4px;
	margin-right: 10px;
}

.buy-box {
	position: fixed;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: row;
	z-index: 2;
	width: 100%;

	.buy-info {
		height: 144rpx;
		width: 100%;
		border-radius: 20px 20rpx 0 0;
		background: rgba(255, 255, 255, 1);
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}
}



.buy-btn {
	display: flex;
	flex-direction: column;
	;
	text-align: center;
	flex-grow: 0;
	margin: 0 10px;
	align-items: center;
}

.buy-btn image {
	width: 52rpx;
	height: 52rpx;
}

.buy-btn text {
	font-size: 26rpx;
	color: #666;
}

.buy-btn-group {
	height: 70rpx;

	border-radius: 50px;
	flex-grow: 1;
	margin: 0 10px;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	color: #fff;
	border-radius: 999px;
	overflow: hidden;
	position: relative;

	.car,
	.buy {
		flex: 1;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

.buy-btn-group text {
	font-size: 26rpx;
	color: #fff
}
</style>